<template>
  <div class="clock">
    <a-flex vertical >
      <span>{{ time }}</span>
      <span>{{ date }}</span>
    </a-flex>
  </div>
</template>

<script>
import {ref, onMounted, onUnmounted} from 'vue';

// 简单的农历转换工具，可以根据需求选择更复杂的库


export default {
  setup() {
    const time = ref('');
    const date = ref('');


    // 更新当前时间
    const updateTime = () => {
      const now = new Date();
      time.value = now.toLocaleTimeString(); // hh:mm:ss
      date.value = now.toLocaleDateString(); // yyyy/mm/dd

    };

    // 组件挂载后启动定时器
    onMounted(() => {
      updateTime();
      const interval = setInterval(updateTime, 1000); // 每秒更新一次时间

      // 清理定时器，防止内存泄漏
      onUnmounted(() => {
        clearInterval(interval);
      });
    });

    return {
      time,
      date,
    };
  },
};
</script>

<style scoped>
.clock {
  text-align: center;
}

span {
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 2rem;
}
</style>
